<template>
  <div>
    <div
        class="topSearch"
        style="margin-bottom: 10px; display: flex; justify-content: space-between"
    >
      <div>
        <!--         <span>仓库： <el-select size="small"-->
        <!--                              style="width: 250px" v-model="params.areaId" clearable>-->
        <!--                <el-option v-for="item in warehouseList" :label="item.areaName" :value="item.area"-->
        <!--                           :key="item.area"></el-option>-->
        <!--              </el-select></span>-->

        <span style="margin-left: 15px"
        >门店名称：<el-input
            size="small"
            style="width: 220px"
            v-model="params.storeName"
            clearable
        ></el-input
        ></span>

        <span style="margin-left: 15px">所属仓库：</span>
        <el-select
            clearable
            v-model="params.area"
            size="small"
            style="width: 200px"
            placeholder="请选择"
        >
          <el-option
              v-for="item in warehouseList"
              :key="item.area"
              :label="item.areaName"
              :value="item.area"
          />
        </el-select>
        <!--        <span style="text-align: center; margin-left: 20px"-->
        <!--          >品牌方：-->
        <!--          <el-select-->
        <!--            v-model="params.systemType"-->
        <!--            placeholder="请按品牌方搜索"-->
        <!--            size="small"-->
        <!--            style="width: 200px"-->
        <!--          >-->
        <!--            <el-option-->
        <!--              :value="item.id"-->
        <!--              :label="item.systemName"-->
        <!--              :key="item.id"-->
        <!--              v-for="item in systemList"-->
        <!--            ></el-option>-->
        <!--          </el-select>-->
        <!--        </span>-->
        <span style="text-align: center; margin-left: 20px"
        >发货时间：
          <el-date-picker
              v-model="sateValue"
              type="daterange"
              range-separator="至"
              clearable
              size="small"
              @change="selectTime"
              style="width: 200px"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
          >
          </el-date-picker>
        </span>
        <span style="margin-left: 15px">
          <el-button size="small" type="primary" @click="_search"
          >搜 索</el-button
          >
          <el-button size="small" type="info" @click="_reset">重 置</el-button>
        </span>
      </div>
    </div>
    <div class="centerTable">
      <div
          style="
          width: 100%;
          display: flex;
          justify-content: flex-end;
          margin-bottom: 10px;
        "
      >
        <el-button size="small" type="primary" @click="_add"
        >新增明细表
        </el-button>
        <!--        <el-dropdown>-->
        <!--          <el-button type="primary">-->
        <!--            财务明细表下载<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
        <!--          </el-button>-->
        <!--          <el-dropdown-menu slot="dropdown">-->
        <!--            <el-dropdown-item>全量下载</el-dropdown-item>-->
        <!--            <el-dropdown-item>按时间筛选下载</el-dropdown-item>-->
        <!--          </el-dropdown-menu>-->
        <!--        </el-dropdown>-->
        <el-button
            type="primary"
            size="small"
            @click="getData('download')"
            v-prevent-re-click
        ><i class="el-icon-download"></i>财务明细表下载
        </el-button>
      </div>
      <el-table
          :data="finaceDetailData"
          height="calc(100vh - 280px)"
          :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
          :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#66b1ff',
          color: 'white',
        }"
      >
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="storeName" label="门店名称"></el-table-column>
        <!--        <el-table-column prop="systemName" label="所属品牌"></el-table-column>-->
        <el-table-column prop="areaName" label="所属仓库"></el-table-column>
        <el-table-column
            v-for="col in editableColumns"
            :key="col.prop"
            :prop="col.prop"
            :label="col.label"
        >
          <template v-slot:default="scope">
            <!--            <el-input-->
            <!--              v-if="scope.row.isEditing[col.prop]"-->
            <!--              v-model="scope.row[col.prop]"-->
            <!--              @blur="blurEvent(scope.row, scope.$index, col.prop)"-->
            <!--              v-focus-->
            <!--            ></el-input>-->
            <div v-if="col.prop === 'payTime'">
              {{ scope.row.payTime }}
            </div>
            <div v-else-if="col.prop === 'deliveryDate'">
              {{ scope.row.deliveryDate }}
            </div>
            <div v-else-if="col.prop === 'courierNumberProofList'">
              <div style="display: flex">
                <el-image
                    v-for="(item, index) in scope.row.courierNumberProofList"
                    :key="index"
                    :src="host + item"
                    :preview-src-list="
                    scope.row.courierNumberProofList.map((img) => host + img)
                  "
                    class="img-item"
                    fit="cover"
                >
                </el-image>
              </div>
            </div>
            <div v-else-if="col.prop === 'addImgList'">
              <div style="display: flex">
                <el-image
                    v-for="(item, index) in scope.row.addImgList"
                    :key="index"
                    :src="host + item"
                    :preview-src-list="
                    scope.row.addImgList.map((img) => host + img)
                  "
                    class="img-item"
                    fit="cover"
                >
                </el-image>
              </div>
            </div>
            <p v-else @click="cellClick(scope.row, col.prop)">
              {{ scope.row[col.prop] }}
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="a" label="操作">
          <template v-slot:default="scope">
            <el-link
                style="
                color: #66b1ff;
                text-decoration: underline;
                margin-right: 10px;
              "
                @click="_edit(scope.row)"
            >编 辑
            </el-link>
            <el-link
                v-if="userName=='曹紫芳'"
                style="
                color: #ce0e0f;
                text-decoration: underline;
                margin-right: 10px;
              "
                @click="_delete(scope.row)"
            >删 除
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          style="padding: 20px 0"
          align="right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[20, 30, 40, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      >
      </el-pagination>
    </div>
    <div>
      <el-dialog
          :visible.sync="dialogAdd"
          :title="title"
          top="10px"
          width="40%"
      >
        <div style="height: calc(100vh - 250px); overflow-y: auto">
          <el-row>
            <el-col :span="12">
              <span style="width: 50px">店名：</span>
              <el-input
                  size="small"
                  style="width: 280px"
                  v-model="data.storeName"
              ></el-input>
            </el-col>
            <!--            <el-col :span="12">-->
            <!--              <span style="width: 50px">品牌：</span>-->
            <!--              <el-select-->
            <!--                size="small"-->
            <!--                style="width: 280px"-->
            <!--                v-model="data.systemType"-->
            <!--              >-->
            <!--                <el-option-->
            <!--                  :value="item.id"-->
            <!--                  :label="item.systemName"-->
            <!--                  :key="item.id"-->
            <!--                  v-for="item in systemList"-->
            <!--                ></el-option>-->
            <!--              </el-select>-->
            <!--            </el-col>-->
            <!--            <el-col :span="12">-->
            <!--              <span style="width: 50px">日期：</span>-->
            <!--              <el-date-picker-->
            <!--                  v-model="data.afterTime"-->
            <!--                  type="date"-->
            <!--                  size="small"-->
            <!--                  style="width: 280px"-->
            <!--                  value-format="yyyy-MM-dd"-->
            <!--                  placeholder="选择日期">-->
            <!--              </el-date-picker>-->
            <!--            </el-col>-->
          </el-row>
          <!--        -->
          <el-row>
            <el-col :span="12">
              <span>货拉拉：</span>
              <el-input-number
                  v-model="data.lalamove"
                  :min="0"
                  size="small"
                  style="width: 200px"
              ></el-input-number>
            </el-col>
            <el-col :span="12">
              <span>仓库货架货拉拉：</span>
              <el-input-number
                  v-model="data.warehouseLalamove"
                  :min="0"
                  size="small"
                  style="width: 200px"
                  @change="changeNum('warehouseLalamove', $event)"
              ></el-input-number>
            </el-col>
          </el-row>
          <!--        -->
          <el-row>
            <el-col :span="12">
              <span>安装费卸货：</span>
              <el-input-number
                  v-model="data.installationFee"
                  :min="0"
                  size="small"
                  style="width: 200px"
                  @change="changeNum('installationFee', $event)"
              ></el-input-number>
            </el-col>
            <el-col :span="12">
              <span>外装:</span>
              <el-input-number
                  v-model="data.outInstallationFee"
                  :min="0"
                  size="small"
                  style="width: 200px"
                  @change="changeNum('outInstallationFee', $event)"
              ></el-input-number>
            </el-col>
          </el-row>
          <!--        -->
          <el-row>
            <el-col :span="12">
              <span>二次上门:</span>
              <el-input-number
                  v-model="data.secondVisit"
                  :min="0"
                  size="small"
                  style="width: 200px"
                  @change="changeNum('secondVisit', $event)"
              ></el-input-number>
            </el-col>
            <el-col :span="12">
              <span>三次上门:</span>
              <el-input-number
                  v-model="data.thirdVisit"
                  :min="0"
                  size="small"
                  style="width: 200px"
                  @change="changeNum('thirdVisit', $event)"
              ></el-input-number>
            </el-col>
          </el-row>
          <!--        -->
          <el-row>
            <el-col :span="12">
              <span>四次上门:</span>
              <el-input-number
                  v-model="data.fourVisit"
                  :min="0"
                  size="small"
                  style="width: 200px"
                  @change="changeNum('fourVisit', $event)"
              ></el-input-number>
            </el-col>
            <el-col :span="12">
              <span>改货架/退费:</span>
              <el-input-number
                  v-model="data.returnFee"
                  :min="0"
                  size="small"
                  style="width: 200px"
                  @change="changeNum('returnFee', $event)"
              ></el-input-number>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <span>售后-装修方问题:</span>
              <el-input-number
                  v-model="data.companyFee"
                  :min="0"
                  size="small"
                  style="width: 200px"
                  @change="changeNum('companyFee', $event)"
              ></el-input-number>
            </el-col>
            <el-col :span="12">
              <span>售后-品牌方问题</span>
              <el-input-number
                  v-model="data.brandFee"
                  :min="0"
                  size="small"
                  style="width: 200px"
                  @change="changeNum('brandFee', $event)"
              ></el-input-number>
            </el-col>
          </el-row>
          <!--        -->
          <el-row>
            <el-col :span="12">
              <span>客户退款:</span>
              <el-input-number
                  v-model="data.customerRefund"
                  :min="0"
                  size="small"
                  style="width: 200px"
                  @change="changeNum('customerRefund', $event)"
              ></el-input-number>
            </el-col>
            <el-col :span="12">
              <span>工厂问题:</span>
              <el-input-number
                  v-model="data.factoryLssue"
                  :min="0"
                  size="small"
                  style="width: 200px"
                  @change="changeNum('factoryLssue', $event)"
              ></el-input-number>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <span>欠数破损:</span>
              <el-input-number
                  v-model="data.qpReissue"
                  :min="0"
                  size="small"
                  style="width: 200px"
                  @change="changeNum('qpReissue', $event)"
              ></el-input-number>
            </el-col>
            <el-col
                :span="12"
                style="
                display: flex;
                align-items: center;
                justify-content: space-between;
              "
            >
              <div>
                <span style="color: red; display: inline">*</span>出库仓库：
              </div>

              <el-select
                  clearable
                  size="small"
                  v-model="data.area"
                  :disabled="disabled"
                  style="width: 78%"
                  placeholder="请选择"
              >
                <el-option
                    v-for="item in warehouseList"
                    :key="item.area"
                    :label="item.areaName"
                    :value="item.area"
                />
              </el-select>
            </el-col>
          </el-row>
          <!--        -->
          <div style="margin-top: 15px">
            <el-row style="display: flex; align-items: center">
              <el-col style="display: flex; align-items: center">
                <span>破损补发快递图片：</span>
                <el-upload
                    multiple
                    class="uploader-wrap"
                    :headers="headers"
                    :action="`${$apiHost}/common/fileImgUrl`"
                    :on-success="paySuc"
                    :show-file-list="false"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">
                    只能上传jpg/png文件，且不超过500kb
                  </div>
                  <template #tip>
                    <div class="img-wrap" style="display: flex">
                      <div
                          v-for="(item, index) in courierNumberProofList"
                          :key="index"
                      >
                        <el-image
                            :key="index"
                            :src="host + item"
                            :preview-src-list="
                            courierNumberProofList.map((img) => host + img)
                          "
                            class="img-item"
                            fit="cover"
                        >
                        </el-image>
                        <div @click="deletePic(index)">
                          <el-icon name="delete"></el-icon>
                        </div>
                      </div>
                    </div>
                  </template>
                </el-upload>
              </el-col>
              <el-col>
                <span>凭证：</span>
                <div>
                  <span style="color: gray; font-size: 12px"
                  >(粘贴复制即可上传图片)</span
                  >
                  <div class="div" style="display: flex; align-items: center">
                    <div
                        v-for="(v, i) in addImgList"
                        style="
                        display: flex;
                        align-items: center;
                        margin-right: 10px;
                      "
                        :key="i"
                    >
                      <el-image
                          v-if="v"
                          :key="i"
                          style="width: 50px; height: 50px"
                          ref="preview"
                          :src="host + v"
                          :preview-src-list="[host + v]"
                      >
                      </el-image>
                      <!-- v-show="!editDetails" -->
                      <div @click="deleteImgVouchers(i)">
                        <el-icon name="delete"></el-icon>
                      </div>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <span>门店实付金额:</span>
                <el-input-number
                    v-model="data.payMoney"
                    :min="0"
                    size="small"
                    style="width: 200px"
                    @change="changeNum('payMoney', $event)"
                ></el-input-number>
              </el-col>
              <el-col :span="12">
                <span>门店成本金额:</span>
                <el-input-number
                    v-model="data.costMoney"
                    :min="0"
                    size="small"
                    style="width: 200px"
                    @change="changeNum('costMoney', $event)"
                ></el-input-number>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <span>店铺开支费用:</span>
                <el-input-number
                    v-model="data.shopFee"
                    :min="0"
                    size="small"
                    style="width: 200px"
                    @change="changeNum('shopFee', $event)"
                ></el-input-number>
              </el-col>
              <el-col :span="12">
                <span>人工费用:</span>
                <el-input-number
                    v-model="data.laborCosts"
                    :min="0"
                    size="small"
                    style="width: 200px"
                    @change="changeNum('laborCosts', $event)"
                ></el-input-number>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <span>利润:</span>
                <el-input-number
                    v-model="data.profit"
                    :min="0"
                    size="small"
                    style="width: 200px"
                    @change="changeNum('profit', $event)"
                ></el-input-number>
              </el-col>
              <el-col :span="12">
                <span>报价单运费:</span>
                <el-input-number
                    v-model="data.bjdFee"
                    :min="0"
                    size="small"
                    style="width: 200px"
                    @change="changeNum('bjdFee', $event)"
                ></el-input-number>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <span style="width: 70px">付款日期：</span>
                <el-date-picker
                    v-model="data.payTime"
                    type="date"
                    size="small"
                    style="width: 280px"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                >
                </el-date-picker>
              </el-col>
              <el-col :span="12">
                <span style="width: 50px">卡号：</span>
                <el-input
                    style="width: 280px"
                    size="small"
                    v-model="data.card"
                ></el-input>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <span style="width: 70px">发货日期：</span>
                <el-date-picker
                    v-model="data.deliveryDate"
                    type="date"
                    size="small"
                    style="width: 280px"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                >
                </el-date-picker>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <span>公里数:</span>
                <el-input-number
                    v-model="data.kilometers"
                    :min="0"
                    size="small"
                    style="width: 200px"
                    @change="changeNum('kilometers', $event)"
                ></el-input-number>
              </el-col>
              <el-col :span="12">
                <span>300以内自装:</span>
                <el-input-number
                    v-model="data.thirdIn"
                    :min="0"
                    size="small"
                    style="width: 200px"
                    @change="changeNum('thirdIn', $event)"
                ></el-input-number>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <span>300以内外装:</span>
                <el-input-number
                    v-model="data.thirdOut"
                    :min="0"
                    size="small"
                    style="width: 200px"
                    @change="changeNum('thirdOut', $event)"
                ></el-input-number>
              </el-col>
              <el-col :span="12">
                <span>300-500内装:</span>
                <el-input-number
                    v-model="data.thirdFiveIn"
                    :min="0"
                    size="small"
                    style="width: 200px"
                    @change="changeNum('payMoney', $event)"
                ></el-input-number>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <span>300-500外装:</span>
                <el-input-number
                    v-model="data.thirdFiveOut"
                    :min="0"
                    size="small"
                    style="width: 200px"
                    @change="changeNum('payMoney', $event)"
                ></el-input-number>
              </el-col>
              <el-col :span="12">
                <span>500外 内装:</span>
                <el-input-number
                    v-model="data.fiveIn"
                    :min="0"
                    size="small"
                    style="width: 200px"
                    @change="changeNum('qpReissue', $event)"
                ></el-input-number>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <span>500外 外装:</span>
                <el-input-number
                    v-model="data.fiveOut"
                    :min="0"
                    size="small"
                    style="width: 200px"
                    @change="changeNum('payMoney', $event)"
                ></el-input-number>
              </el-col>
              <el-col :span="12">
                <span>补发费</span>
                <el-input-number
                    v-model="data.bfFee"
                    :min="0"
                    size="small"
                    style="width: 200px"
                    @change="changeNum('bfFee', $event)"
                ></el-input-number>
              </el-col>
            </el-row>
            <el-row v-if="title == '编辑'">
              <el-col :span="12">
                <span>运费:</span>
                <el-input-number
                    v-model="data.freight"
                    :min="0"
                    size="small"
                    style="width: 200px"
                    @change="changeNum('freight', $event)"
                ></el-input-number>
              </el-col>
            </el-row>
          </div>
        </div>
        <span slot="footer">
          <el-button @click="dialogAdd = false">取 消</el-button>
          <el-button type="primary" @click="_submit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {downloadReportWithImage, localStorageAsync} from '@/utils/public'
import axios from 'axios'
import dayjs from 'dayjs'
// import { Message } from 'element-ui'

export default {
  name: 'finaceDetail',
  data() {
    return {
      dialogAdd: false,
      disabled: false,
      addImgList: [],
      title: '',
      date: '',
      areaId: '',
      userName: '',
      num: 0,
      sateValue: '',
      currentPage: 1,
      total: 0,
      host: this.$imgHost,
      warehouseList: [],
      editableColumns: [
        {prop: 'lalamove', label: '货拉拉'},
        {prop: 'warehouseLalamove', label: '仓库货架货拉拉'},
        {prop: 'installationFee', label: '安装费卸货'},
        {prop: 'outInstallationFee', label: '外装'},
        {prop: 'secondVisit', label: '二次上门'},
        {prop: 'thirdVisit', label: '三次上门'},
        {prop: 'fourVisit', label: '四次上门'},
        {prop: 'companyFee', label: '售后-装修方问题'},
        {prop: 'brandFee', label: '售后-品牌方问题'},
        {prop: 'returnFee', label: '改货架/退货架费用'},
        {prop: 'customerRefund', label: '客户退款'},
        {prop: 'factoryLssue', label: '工厂问题'},
        {prop: 'qpReissue', label: '欠数破损'},
        {prop: 'courierNumberProofList', label: '补发快递单号图'},
        {prop: 'addImgList', label: '凭证截图'},
        {prop: 'payMoney', label: '门店实付金额'},
        {prop: 'costMoney', label: '门店成本金额'},
        {prop: 'shopFee', label: '店铺开支费用'},
        {prop: 'laborCosts', label: '人工费用'},
        {prop: 'profit', label: '利润'},
        {prop: 'bjdFee', label: '报价单运费'},
        {prop: 'card', label: '卡号'},
        {prop: 'payTime', label: '付款时间'},
        {prop: 'deliveryDate', label: '发货时间'},
        {prop: 'kilometers', label: '公里数'},
        {prop: 'thirdIn', label: '300以内自装'},
        {prop: 'thirdFiveIn', label: '300-500内装'},
        {prop: 'thirdFiveOut', label: '300-500外装'},
        {prop: 'fiveIn', label: '500外 自装'},
        {prop: 'fiveOut', label: '500外 外装'},
        {prop: 'bfFee', label: '补发费'},
        {prop: 'freight', label: '运费'},
      ],
      data: {
        area: '', // 仓库ID
        // areaName: '',
        // systemType: '', // 品牌方类型
        storeName: '',
        lalamove: 0,
        warehouseLalamove: 0,
        installationFee: 0,
        outInstallationFee: 0,
        secondVisit: 0,
        thirdVisit: 0,
        fourVisit: 0,
        companyFee: 0,
        brandFee: 0,
        returnFee: 0,
        customerRefund: 0,
        factoryLssue: 0,
        qpReissue: 0,
        courierNumberImg: '',
        payMoney: 0,
        costMoney: 0,
        shopFee: 0,
        laborCosts: 0,
        profit: 0,
        bjdFee: 0,
        freight: 0,
        payTime: '',
        deliveryDate: '',
        card: '',
        remark: '',
        kilometers: 0,
        thirdIn: 0,
        thirdOut: 0,
        thirdFiveIn: 0,
        thirdFiveOut: 0,
        fiveIn: 0,
        fiveOut: 0,
        bfFee: 0,
      },
      editId: '',
      params: {
        storeName: '',
        area: '',
        // systemType: '',
        startTime: '',
        endTime: '',
        pageNumber: 1,
        pageSize: 20,
      },
      orderImg: [],
      systemList: [],
      orderProofList: [],
      productData: [],
      courierNumberProofList: [],
      finaceDetailData: [],
    }
  },
  computed: {
    headers() {
      const token = this.$quinn.getStorage('token')
      return {
        token,
      }
    },
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.querySelector('input').focus()
      },
    },
  },
  created() {
    this.areaList()
    this.getData()
    // this.getSystemType()
    document.addEventListener('paste', this.handlePaste)
    const {userName = []} = this.$quinn.getStorage("userData") || {};
    this.userName = userName
  },
  methods: {
    selectTime(val) {
      if (val) {
        this.params.startTime = dayjs(val[0]).format('YYYY-MM-DD')
        this.params.endTime = dayjs(val[1]).format('YYYY-MM-DD')
      } else {
        this.params.startTime = ''
        this.params.endTime = ''
      }
    },
    handlePaste(event) {
      if (!this.dialogAdd) return
      const clipboardData = event.clipboardData
      // console.log('clipboardData', clipboardData)
      if (clipboardData) {
        for (let i = 0; i < clipboardData.items.length; i++) {
          const item = clipboardData.items[i]
          if (item.kind === 'file' && item.type.startsWith('image/')) {
            const file = item.getAsFile()
            if (file) {
              this.uploadImage(file) // 处理文件上传逻辑
              // console.log('222')
            }
          } else {
            this.$message.error('请拷贝图片!')
            break
          }
        }
      }
    },
    deleteImgVouchers(i) {
      this.addImgList.splice(i, 1)
    },
    uploadImage(imageFile) {
      const formData = new FormData()
      formData.append('file', imageFile)
      axios
          .post(`${this.$apiHost}/common/fileImgUrl`, formData, {
            headers: {
              'Content-Type': 'multipart/form-data',
              token: window.$quinn.getStorage('token'),
            },
          })
          .then((response) => {
            // console.log(response)
            this.addImgList.push(response.data.result[0])
          })
          .catch((error) => {
          })
    },
    getSystemType() {
      this.$api.orderGetSystemTypeVo().then((res) => {
        this.systemList = res
      })
    },
    async _submit() {
      try {
        const apiMap = {
          新增: this.$api.financeAddDetailFee,
          编辑: this.$api.financeUpdateDetailFee,
        }
        const apiFunc = apiMap[this.title]
        if (!apiFunc) return
        const subData = {
          ...this.data,
          courierNumberProofList: this.courierNumberProofList,
          addImgList: this.addImgList,
        }
        if (!subData.afterTime) delete subData.afterTime
        if (this.title == '编辑') subData.id = this.editId
        const resDate = await apiFunc(subData)
        if (resDate == 1) {
          this.$message.success(`${this.title}成功！`)
          this.dialogAdd = false
          await this.getData()
        }
      } catch (err) {
        console.error('接口请求出错：', err)
        this.$message.error('操作失败，请稍后重试')
      }
    },
    blurEvent(row, index, column) {
      row.isEditing[column] = false
      const payload = {
        id: row.id,
        [column]: row[column],
      }
      this.$api.financeUpdateDetailFee(payload).then((res) => {
        if (res == 1) {
          this.$message.success('修改成功！')
          this.getData()
        }
      })
    },
    cellClick(row, column) {
      //input编辑
      Object.keys(row.isEditing).forEach((key) => {
        row.isEditing[key] = false
      })
      // 取消
      row.isEditing[column] = true
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.params.pageNumber = val
      this.getData()
    },
    _search() {
      this.params.pageNumber = 1
      this.getData()
    },
    _reset() {
      this.params = this.$options.data().params
      this.getData()
    },
    async getData(dataPurpose = 'default') {
      // console.log('dataPurpose', dataPurpose)
      if (dataPurpose == 'default') {
        const result = await localStorageAsync.removeItem('download')
        if (result == 'success') {
          this.$api.financeGetDetailList(this.params).then((res) => {
            res.data.map((el) => {
              el.isEditing = {}
              this.editableColumns.forEach((col) => {
                el.isEditing[col.prop] = false
              })
            })
            this.finaceDetailData = res.data
            this.total = res.total
          })
        }
      } else if (dataPurpose == 'download') {
        const result = await localStorageAsync.setItem('download', true)
        if (result == 'success') {
          this.params.pageSize = 10000
          this.params.pageNumber = 1
          this.$api.financeGetDetailList(this.params).then((res) => {
            this.downloadDetailReport(res.data)
          })
        }
      }
    },
    downloadDetailReport(tableData) {
      if (!tableData.length) return this.$message.warning('暂无可下载数据')
      const tempArr = this.editableColumns.map((item) => item.label)
      const headers = ['门店名称', '所属仓库', ...tempArr]
      // const headers = [
      //   '门店名称',
      //   // '所属品牌',
      //   '所属仓库',
      //   '货拉拉',
      //   '仓库货架货拉拉',
      //   '安装费卸货',
      //   '外装',
      //   '二次上门',
      //   '三次上门',
      //   '四次上门',
      //   '售后-装修方问题',
      //   '售后-品牌方问题',
      //   '改货架/退货架费用',
      //   '客户退款',
      //   '工厂问题',
      //   '欠数破损',
      //   '补发快递单号图',
      //   '凭证截图',
      //   '门店实付金额',
      //   '门店成本金额',
      //   '店铺开支费用',
      //   '人工费用',
      //   '利润',
      //   '报价单运费',
      //   '卡号',
      //   '付款时间',
      //   '发货时间',
      //   '公里数',
      //   '300以内自装',
      //   '300-500内装',
      //   '300-500外装',
      //   '500外自装',
      //   '500外外装',
      //   '补发费',
      //   '运费',
      // ]
      downloadReportWithImage(headers, tableData, {
        fileName: '财务明细表',
        fileSort: 'detailReport',
      })
    },
    // getData() {
    //   const params = this.params
    //   this.$api.financeGetDetailList(params).then((res) => {
    //     res.data.map((el) => {
    //       el.isEditing = {}
    //       this.editableColumns.forEach((col) => {
    //         el.isEditing[col.prop] = false
    //       })
    //     })
    //     this.finaceDetailData = res.data
    //     this.total = res.total
    //   })
    // },
    _add() {
      this.dialogAdd = true
      this.title = '新增'
      this.data = this.$options.data().data
      this.courierNumberProofList = []
      this.orderProofList = []
    },
    areaList() {
      this.$api.areaLedgerAreaList().then((res) => {
        this.warehouseList = res
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    paySuc(res) {
      if (res.code == 200 && res.result) {
        this.courierNumberProofList.push(res.result[0])
      }
    },
    deletePic(i) {
      this.courierNumberProofList.splice(i, 1)
    },
    changeNum(field, val) {
      if (!val) {
        this.$set(this.data, field, 0)
      }
    },
    _delete(e) {
      const data = {
        id: e.id,
      }
      this.$confirm('确认删除？')
          .then((_) => {
            this.$api.financeDeleteDetailFee(data).then((res) => {
              if (res == 1) {
                this.$message.success('删除成功！')
                this.getData()
              }
            })
          })
          .catch((_) => {
            return
          })
    },
    _edit(a) {
      this.dialogAdd = true
      this.editId = a.id
      this.title = '编辑'
      Object.keys(this.data).forEach((key) => {
        if (key in a) {
          this.$set(this.data, key, a[key])
        }
      })
      this.courierNumberProofList = a.courierNumberProofList
      this.addImgList = a.addImgList || [] // 回显凭证
    },
  },
}
</script>

<style scoped lang="less">
.el-row {
  margin-bottom: 20px;

  span {
    display: inline-block;
    width: 90px;
  }
}
</style>
